<template>
	<view class="body">
		 <view class="videoBox">
			<video id="video" :src="video.url" @error="videoErrorCallback">	
			</video>
		</view>
		<view class="authorBox">
			<view class="avatarBox">
				<img :src="video.promulgator.avatarImg">
			</view>
			<p class="name">{{video.promulgator.name}}</p>
			<p class="fans">{{video.promulgator.fans}}粉丝</p>
		</view>
		<view class="info">
			<img class="showIcon" @click="showContent()" :src="icon">
			<p class="title">{{video.title}}</p>
			<p class="videoInfo">{{video.views}} {{video.pubDate}} {{video.id}}</p>
			<p class="content" v-show="isShow">{{video.info}}</p>
		</view>
		<view class="iconBox">
			<view>
				<img src="../../static/icon/like.png">
				<p>点赞</p>
			</view>
			<view>
				<img src="../../static/icon/coin.png">
				<p>投币</p>
			</view>
			<view>
				<img src="../../static/icon/star_filled.png">
				<p>收藏</p>
			</view>
			<view @click="share()">
				<img src="../../static/icon/share.png">
				<p>分享</p>
			</view>
		</view>
		<uni-popup ref="share" type="share">
		    <uni-popup-share title="分享到" @select="select"></uni-popup-share>
		</uni-popup>
	</view>
</template>

<script>
	import tempUrl from '../../static/video/test.mp4';
	import upIcon from '../../static/icon/arrow_up.png';
	import downIcon from '../../static/icon/arrow_down.png';
	export default{
		data(){
			return{
				isShow:false,
				upIcon:upIcon,
				downIcon:downIcon,
				icon:downIcon,
				video:{
					id:'LV1sda3asd0sds',
					views:'2.21M',//播放数量,
					time:String,//视频时长
					title:"大学生宿舍上网课现状",//视频的标题,
					url:tempUrl,
					info:"此人没有写简介哦111111111111111111111111111111111111111111111111111111111111111111111111111111111",//视频简介
					pubDate:"2020-6-4",//视频发布日期
					promulgator:{
						userId:String,
						name:"胖der",
						userAvatar:String,
						fans:102
					},
					comments:[ //评论区
						{
							username:String,//评论用户的昵称
							avatarImg:String,//评论用户的头像
							content:String,//评论内容
							time:String//评论的时间
						}
					]
				}
			}
		}, 
		async onLoad(options){
			let videoId = options.id;
			let result = await uni.request({
				url:this.config.serverUrl+'/video/getVideo',
				data:{
					videoId:videoId
				},
				method:"GET"
			});
			console.log(result);
			if(result[1].data.status){
				console.log(result[1].data.body);
				this.video = result[1].data.body;
				this.video.promulgator.avatarImg = this.config.serverUrl + '/' + this.video.promulgator.avatarImg;
				this.video.url = this.config.serverUrl + '/' + this.video.url;
			} else {
				alert(result[1].data.content);
			}
		},
		methods:{
			showContent(){
				if(this.isShow == false){
					this.isShow = !this.isShow;
					this.icon = this.upIcon;
				} else {
					this.isShow = !this.isShow;
					this.icon = this.downIcon
				}
			},
			share(){
				this.$refs.share.open();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body{
		#video{
			width:100%;
		}
		>.info{
			width:100%;
			padding:0px 0 10px 0;
			position:relative;
			>p{
				margin-left:20px;
				margin-right:20px;
			}
			>.title{
				font-size:18px;
				font-weight:600;
			}
			>.content{
				word-break: break-all;
				font-size:14px;
				color:$zy-libilibi-font-second-color;
			}
			>.videoInfo{
				color:$zy-libilibi-font-second-color;
				font-size:12px;
			}
			>.showIcon{
				position:absolute;
				right:20px;
				width:30px;
				height:30px;
			}
		}
		>.authorBox{
			padding:10px 0 10px 0;
			position:relative;
			>.avatarBox{
				margin-left:20px;
				width:40px;
				height:40px;
				background-color: $zy-libilibi-boxbackground;
				border-radius: 40px;
				>img{
					width:40px;
					height:40px;
					border-radius:40px;
				}
			}
			>.name{
				position: absolute;
				top:10px;
				left: 70px;
				font-size:16px;
			}
			>.fans{
				position: absolute;
				top:35px;
				left: 70px;
				font-size:10px;
			}
		}
		.iconBox{
			display:flex;
			flex-direction: row;
			justify-content: space-between;
			>view{
				width:25%;
				text-align: center;
				>img{
					width:30px;
					height:30px;
				}
				>p{
					font-size:16px;
					color:$zy-libilibi-font-second-color;
				}
			}
		}
	}
</style>
